<template>
    <el-dialog v-model="dialog" title="部门消息" width="912px" center destroy-on-close>
        <el-container>
            <el-aside width="416px">
                <div class="message-list-wrapped">
                    <div class="list-table-content">
                        <el-table :data="msgStore.msg_list.length > 0 ? msgStore.msg_list : tableData"
                            style="width: 100%;" highlight-current-row @row-click="getDetail">
                            <el-table-column type="index" width="50" />
                            <el-table-column width="5">
                                <template #default='{ row }'>
                                    <div :class="idInList(row.id) ? 'readed' : 'noread'"></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="主题" prop="message_title">
                                <template #default='{ row }'>
                                    <div class="title-wrapped">
                                        <div class="title">{{ row.message_title }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="等级" prop="message_level">
                                <template #default='{ row }'>
                                    <el-tag class="mx-1" round
                                        v-if="row.message_level == '一般'">{{ row.message_level }}</el-tag>
                                    <el-tag type="warning" class="mx-1" round
                                        v-if="row.message_level == '重要'">{{ row.message_level }}</el-tag>
                                    <el-tag type="danger" class="mx-1" round
                                        v-if="row.message_level == '必要'">{{ row.message_level }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="发布日期" prop="message_publish_time">
                                <template #default='{ row }'>
                                    <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-aside>
            <el-main>
                <div class="detail-wrapped" v-if="messageInfo.message_title !== ''">
                    <div>{{ messageInfo.message_title }}</div>
                    <div v-html="messageInfo.message_content"></div>
                </div>
                <div class="detail-wrapped" v-else>
                    请点击列表中的消息进行查看
                </div>
            </el-main>
        </el-container>
    </el-dialog>
</template>

<script lang="ts" setup>
import {
    reactive,
    ref,
} from 'vue'
import {
    getDepartmentMsg,
    getDepartmentMsgList,
    getReadListAndStatus,
    clickDelete
} from '@/api/dep_msg.js'
import { updateClick } from '@/api/message.js'
import {useMsg} from '@/store/message.js'
import { useUserInfoStore } from '@/store/userInfo.js'

const msgStore = useMsg()
const userStore = useUserInfoStore()
const tableData = ref([])

const messageInfo = reactive({
    message_title: '',
    message_content: ''
})
// 当前未读消息
const readList = ref([])

const getUserDepartmentMessage = async () => {
    const id = userStore.id
    const department = userStore.department
    if (department !== null) {
        const res = await getReadListAndStatus(id)
        const res1 = await getDepartmentMsgList(department)
        tableData.value = res1.data
        if (res.data[0].read_status == 0) {
            const res2 = await getDepartmentMsg(id, department)
            const {
                read_list
            } = res2.data
            readList.value = read_list
        } else {
            // 过滤掉新发布的消息ID，确保新消息显示为未读
            const currentMsgIds = tableData.value.map(item => item.id)
            const storedReadList = JSON.parse(res.data[0].read_list)
            readList.value = storedReadList.filter(id => currentMsgIds.includes(id))
        }
    }
}
getUserDepartmentMessage()


const getDetail = async (row: any) => {
    await updateClick(row.message_click_number, row.id);
    await clickDelete(row.id, userStore.id);
    messageInfo.message_title = row.message_title;
    messageInfo.message_content = row.message_content;
    await getUserDepartmentMessage();
    // 引入消息仓库
    const msgStore = useMsg();
    // 更新消息仓库中的已读列表
    await msgStore.returnReadList(userStore.id);
};

const idInList = (id: number) => {
    return !readList.value.includes(id);
}
// 弹窗默认为false
const dialog = ref(false)
// 暴露open
const open = () => {
    dialog.value = true
    getUserDepartmentMessage()
}
defineExpose({
    open
})
</script>

<style lang="scss" scoped>
.el-aside {
    padding-left: 8px;
    min-height: 500px;
}

.el-main {
    min-height: 500px;
    --el-main-padding: 0px;
    border-left: 1px solid #eee;
}

.message-list-wrapped {
    height: 500px;
}

.list-table-content {
    min-height: 10px;
    padding: 8px;
}

.el-table {
    height: 100%;

    .title-wrapped {
        display: flex;
        align-items: center;
    }

    .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.readed {
    display: block;
    width: 5px;
    padding: 1px;
    height: 5px;
    border-radius: 50%;
    background: #A9A9A9;
}

.noread {
    display: block;
    width: 5px;
    padding: 1px;
    height: 5px;
    border-radius: 50%;
    background: #FFA500;
}

.detail-wrapped {
    padding: 8px;
}
</style>